<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">总览</el-breadcrumb-item>
    </el-breadcrumb>
    <div><header style="font-size:50px;margin:50px;color:gray ">Welcome to Superman Management</header></div>
    <div
      class="a"
      id="myBar"
      style="
        width: 750px;
        height: 500px;
        box-sizing: border-box;
        line-height: 289px;
        float: left;
      "
    ></div>
    <div>
      <el-card>
            <div>
              <div><i class="el-icon-s-custom" /></div>
              <div>
                <div >在职员工</div>
                <div >{{ joinnum }} 人</div>
              </div>
            </div>
          </el-card>
          <el-card>
            <div >
              <div><i class="el-icon-s-cooperation" /></div>
              <div>
                <div >退休记录</div>
                <div >{{ leftnum }} 个</div>
              </div>
            </div>
          </el-card>
          <el-card>
            <div >
              <div><i class="el-icon-document" /></div>
              <div>
                <div >转岗记录</div>
                <div >{{ transnum }} 条</div>
              </div>
            </div>
          </el-card>

          <el-card>
            <div >
              <div><i class="el-icon-document" /></div>
              <div>
                <div >离职记录</div>
                <div >{{ leftnum }} 条</div>
              </div>
            </div>
          </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",

  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      msg: "Welcome to Superman Management System",
      chart: null,
      staffs: null,
      joinnum:0,
      transnum:0,
      leavenum:0,
      leftnum:0,
      staffStatistics: [
        // { value: 0, name: "教务处" },
        // { value: 0, name: "Lakua大学" },
        // { value: 0, name: "吴院" },
        // { value: 0, name: "魏院" },
        // { value: 0, name: "蜀院" },
        { value: 0, name: "SmallW公司" },
        { value: 0, name: "SmallA公司" },
        { value: 0, name: "SmallB公司" },
        { value: 0, name: "SmallC公司" },
      ],
    };
  },

  created() {
    this.getStaffs();
    this.getRecord();
  },

  computed: {
    option() {
      return {
        title: {
          text: "各公司人数分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.staffStatistics,
          },
        ],
      };
    },
  },
  mounted() {
    this.drawLine();
    
  },
  watch: {
    option: {
      handler(val) {
        this.chart.setOption(val);
        this.getRecord()
      },
      deep: true,
    },

    staffs: {
      handler() {
        this.getStatistics();

      },
    },
  },

  methods: {
    getStaffs() {
      const that = this;
      this.$axios({
        method: "get",
        url: "/api/staff",
        params: this.listQuery,
      }).then((response) => {
        // console.log(response.data.data)
        that.staffs = response.data.data;
        that.getStatistics();
      });
    },
    getStatistics() {
      for (const staff of this.staffs) {
        // if (staff["dname"] == "Lakua大学") {
        //   this.staffStatistics[1].value += 1;
        // } else if (staff["dname"] == "教务处") {
        //   this.staffStatistics[0].value += 1;
        // } else if (staff["dname"] == "吴院") {
        //   this.staffStatistics[2].value += 1;
        // } else if (staff["dname"] == "魏院") {
        //   this.staffStatistics[3].value += 1;
        // } else if (staff["dname"] == "蜀院") {
        //   this.staffStatistics[4].value += 1;
        // }

        if (staff["dname"] == "SmallW公司") {
          this.staffStatistics[0].value += 1;
        } else if (staff["dname"] == "SmallA公司") {
          this.staffStatistics[1].value += 1;
        } else if (staff["dname"] == "SmallB公司") {
          this.staffStatistics[2].value += 1;
        } else if (staff["dname"] == "SmallC公司") {
          this.staffStatistics[3].value += 1;
        } 
      }
    },

    getRecord() {
      // const that = this;
      this.$axios({
        method: "get",
        url: "/api/staff/joinRecord",
        params: this.listQuery,
      }).then((response) => {
        this.joinnum = response.data.total;
      });
      this.$axios({
        method: "get",
        url: "/api/staff/leftStaff",
        params: this.listQuery,
      }).then((response) => {
        this.leftnum = response.data.total;
      });
      this.$axios({
        method: "get",
        url: "/api/staff/transferRecord",
        params: this.listQuery,
      }).then((response) => {
        this.transnum = response.data.total;
      });
      this.$axios({
        method: "get",
        url: "/api/staff/leaveStaff",
        params: this.listQuery,
      }).then((response) => {
        this.left = response.data.total;
      });
      // console.log("datas0" + this.datas[0]);
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("myBar"));
      // 绘制图表
      this.chart.setOption(this.option);
    },
  },
};
</script>

